<script setup lang="ts">
import { MilkAttributeApi } from '@/api/aib/milkattribute';

defineOptions({ name: 'SelectMilkAttributeCom' })

const milkAttributeId = defineModel("value");
const emit = defineEmits(['select'])
const milkAttributeOptions = ref([]) // 列表的数据

onMounted(() => {
  getList();
})

/** 查询列表 */
const getList = async () => {
  milkAttributeOptions.value = await MilkAttributeApi.getMilkAttributeSimpleList()
}

/** 选中事件改变 */
const onSelect = (e) => {
  MilkAttributeApi.getMilkAttributeByName(e).then((response) => {
    emit('select', response);
  })

}


</script>

<template>
  <el-select v-model="milkAttributeId" clearable placeholder="请选择奶粉属性" filterable @change="onSelect">
    <el-option v-for="item in milkAttributeOptions"
               :key="item.name" :label="item.name" :value="item.name"/>
  </el-select>
</template>

<style scoped lang="scss">
.content {
  overflow: hidden;
}
</style>
